DateTimeEditors for WinRT
Step 2 of 3: Customizing the C1TimeSelector Control

In the previous step, you created a WinRT-style application with a C1TimeSelector control. In this step, you will modify the appearance of the control.

Complete the following steps:

  1. Locate the Brush Category in your application's Properties window and click to display the options. You can set custom colors for the following properties: Background, BorderBrush, and Foreground.  You can also set the Linear Gradient for the Background.

You can also change the appearance of your C1DateTimeSelector control by inserting the following XAML markup into the <Xaml:C1DateTimeSelector/> tag. Note that this XAML markup includes the <Xaml:C1TimeSelector.Background> tag: 

Markup
Copy Code
<Xaml:C1TimeSelector HorizontalAlignment="Left" VerticalAlignment="Top" Xaml:C1NagScreen.Nag="True" Margin="22,55,0,0" Width="302" BorderBrush="#CC9CC391">
      <Xaml:C1TimeSelector.Background>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
           <GradientStop Color="#FF1C3E1F"/>
           <GradientStop Color="#FF44A24C" Offset="0.869"/>
        </LinearGradientBrush>
      </Xaml:C1TimeSelector.Background>
   </Xaml:C1TimeSelector>

 

  1. In the Text Category, you can customize the control's Text properties In this case, change the FontFamily to SketchFlow Print, the FontSize to 18 px, and the FontWeight to Bold.

You can also change the FontFamily and FontSize by inserting the following XAML markup into the <Xaml:C1DateTimeSelector/> tag:

Markup
Copy Code
FontFamily="SketchFlow Print" FontSize="18" FontWeight="Bold"

 

Now that you've customized the application, you can run the project and observe the run time behaviors of the control.

See Also

 

 


Copyright (c) GrapeCity, inc. All rights reserved.

Product Support Forum  |  Documentation Feedback